<template>
  <div id="flightTickets">
    <div class="card">
      <div class="card-header bg-info text-white">预订员统计</div>
      <div class="card-body py-1">
        <form class="row row-cols-lg-auto align-items-center">
          <label>账单日期</label>
          <div class="col-1">
            <my-date-picker
              id="beginDate"
              v-model="beginDate"
              placeholder="开始日期"
              sizing="sm"
            ></my-date-picker>
          </div>
          <div class="col-1">
            <my-date-picker
              id="endDate"
              v-model="endDate"
              placeholder="截止日期"
              sizing="sm"
            ></my-date-picker>
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-1"
              @click.stop="searchStats()"
            >
              统计
            </button>
          </div>
        </form>
      </div>
    </div>
    <table class="table table-sm table-striped">
      <thead>
        <tr>
          <th></th>
          <th>预订员</th>
          <th></th>
          <th class="text-end">数量</th>
          <th class="text-end">总金额</th>
          <th class="text-end">总成本</th>
          <th class="text-end">总利润</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="count > 0">
          <td colspan="2">合计：</td>
          <td></td>
          <td class="text-end">{{ count }}</td>
          <td class="text-end">{{ totalAmount }}</td>
          <td class="text-end">{{ totalCost }}</td>
          <td class="text-end">{{ totalProfit }}</td>
        </tr>

        <template v-for="(info, index) in dataList">
          <tr>
            <td class="text-end">{{ index + 1 }}</td>
            <td class="">
              {{ info.op1 }}
            </td>
            <td></td>
            <td class="text-end">{{ info.count }}</td>
            <td class="text-end">{{ info.totalAmount }}</td>
            <td class="text-end">{{ info.totalCost }}</td>
            <td class="text-end">{{ info.totalProfit }}</td>
          </tr>
          <tr v-for="item in info.items">
            <td class="text-end"></td>
            <td class=""></td>
            <td>{{ item.billTypeName }}</td>
            <td class="text-end">{{ item.count }}</td>
            <td class="text-end">{{ item.totalAmount }}</td>
            <td class="text-end">{{ item.totalCost }}</td>
            <td class="text-end">{{ item.totalProfit }}</td>
          </tr>
        </template>
        <tr v-if="count > 0">
          <td colspan="2">合计：</td>
          <td></td>
          <td class="text-end">{{ count }}</td>
          <td class="text-end">{{ totalAmount }}</td>
          <td class="text-end">{{ totalCost }}</td>
          <td class="text-end">{{ totalProfit }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { searchOp1Stats } from "@/api/report.js";
import { today } from "@/common/common.js";
import MyDatePicker from "@/components/my-datepicker.vue";

export default {
  components: {
    MyDatePicker,
  },
  data() {
    return {
      dataList: [],
      beginDate: "",
      endDate: "",
      count: 0,
      totalAmount: 0,
      totalCost: 0,
      totalProfit: 0,
    };
  },
  mounted: function () {
    this.endDate = today();
    this.beginDate = this.endDate.substr(0, 8) + "01";
  },
  methods: {
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    searchStats: function () {
      if (this.beginDate === "" || this.endDate === "") return;

      this.reset();

      const params = {
        beginDate: this.beginDate,
        endDate: this.endDate,
      };

      this.showLoading();

      searchOp1Stats(
        params,
        (v) => {
          this.dataList = v;
          for (const info of this.dataList) {
            this.count += info.count;
            this.totalAmount += info.totalAmount;
            this.totalCost += info.totalCost;
            this.totalProfit += info.totalProfit;
          }

          this.totalAmount = Math.round(this.totalAmount * 100) / 100;
          this.totalCost = Math.round(this.totalCost * 100) / 100;
          this.totalProfit = Math.round(this.totalProfit * 100) / 100;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    reset: function () {
      this.count = 0;
      this.totalAmount = 0;
      this.totalCost = 0;
      this.totalProfit = 0;
    },
  },
};
</script>
